<!-- 实物奖品列表 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="()=>{ searchData = {}; gzThreeRef.clear(); }" searchConditionNum="6">
        <a-form-item class="table-search-item" label="活动编号">
          <a-input v-model:value="searchData['activityNo']" :placeholder="'活动编号'" />
        </a-form-item>
        <a-form-item class="table-search-item" label="福分名称">
          <a-input v-model:value="searchData['scoreName']" :placeholder="'福分名称'" />
        </a-form-item>
        <a-form-item class="table-search-item" label="机构号">
          <GzTreeSelect ref="gzThreeRef" v-model:value="searchData['agentNo']" :isNeedDefault="false" />
        </a-form-item>
        <a-form-item class="table-search-item" label="奖品状态">
          <a-select v-model:value="searchData['state']" :placeholder="'状态'">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="0">草稿</a-select-option>
            <a-select-option :value="1">下线</a-select-option>
            <a-select-option :value="2">上线</a-select-option>
            <a-select-option :value="3">已过期</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="table-search-item" label="批次号">
          <a-input v-model:value="searchData['batchNo']" :placeholder="'批次号'" />
        </a-form-item>
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        row-key="couponId"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_SCORE_INFO_ADD')" type="primary" @click="addOrEditFunc(false)">
            <plus-outlined />新建
          </a-button>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="$access('ENT_SCORE_INFO_VIEW') && column.key === 'scoreName'">
            <b><a @click="addOrEditFunc(record,true,true,true)">{{ record.scoreName }}</a></b>
          </template>
          <template v-if="column.key === 'scoreNum'">
            {{ (record.scoreNum === 0 ? '无限制' : record.scoreNum) + '/' + (record.scoreGet || 0) }}
          </template>
          <template v-if="column.key === 'state'">
            <a-badge v-if="record.state == 0" status="default" text="草稿" />
            <a-badge v-else-if="record.state == 1" status="warning" text="下线" />
            <a-badge v-else-if="record.state == 2" status="processing" text="上线" />
            <a-badge v-else-if="record.state == 3" status="error" text="过期" />
          </template>
          <template v-if="column.key === 'overType'">
            <template v-if="record.overType == 0">领取后{{ record.overDays }}天过期</template>
            <template v-else-if="record.overType == 1">{{ dayjs(record.overTime).format('YYYY[年]M[月]D[日]') }}过期</template>
            <template v-else>领取后次季度首月月底过期</template>
          </template>
          <template v-if="column.key === 'activityName'">
            <template v-if="record.activityName">{{ record.activityName }}</template>
            <template v-else>--</template>
          </template>
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <a-button v-if="$access('ENT_SCORE_INFO_EDIT') && record.state ==0" type="link" @click="addOrEditFunc(record)">修改</a-button>
              <a-button v-if="$access('ENT_SCORE_INFO_EDIT') && record.state == 1" type="link" @click="stateChange(record)">上线</a-button>
              <a-button v-if="$access('ENT_SCORE_INFO_EDIT') && record.state == 2" type="link" @click="stateChange(record)">下线</a-button>
              <a-button v-if="$access('ENT_SCORE_INFO_EDIT') && record.state == 2" type="link" @click="addOrEditFunc(record,true,false,false,record.scoreNum)">追加</a-button>
              <a-button v-if="$access('ENT_SCORE_INFO_DEL') && record.state !== 2 && !record.activityId" type="link" danger @click="virtualDelete(record)">删除</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
    <!-- 新增实物奖品 -->
    <AddOrEdit ref="addOrEditRef" :callbackFunc="() => infoTableRef.refTable()" />
    <!-- 详情 -->
    <Detail ref="detailRef" />
  </page-header-wrapper>
</template>
<script setup lang="ts">
import{$scoreList,$scoreState,$scoreDelete} from '@/api/awardMange/score/index'
import AddOrEdit from './AddOrEdit.vue'
import Detail from './Detail.vue'
import { ref, reactive, getCurrentInstance } from 'vue'
import dayjs from 'dayjs'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
const gzThreeRef = ref()
const addOrEditRef = ref()
const detailRef = ref()

const infoTableRef = ref()
let tableColumns = reactive([
  { key: 'batchNo', title: '批次号', dataIndex: 'batchNo',fixed: 'left', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'scoreName', title: '福分名称',dataIndex: 'scoreName', width: 220, minWidth: 220, maxWidth: 250 },
  { key: 'scoreValue', title: '福分面值',dataIndex: 'scoreValue', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'scoreNum', title: '总数量/已领取数量',dataIndex: 'scoreNum', width: 170, minWidth: 170, maxWidth: 250 },
  { key: 'overType', title: '过期规则',dataIndex: 'overType', width: 170, minWidth: 170, maxWidth: 250 },
  { key: 'state', title: '状态', dataIndex: 'state', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'activityName', title: '已配置活动', dataIndex: 'activityName', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'agentNo', title: '机构号', dataIndex: 'agentNo', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'operation', title: '操作', dataIndex: 'operation',width: 260, fixed: 'right', align: 'center' }
])

const searchData:any = ref({})

// 请求table接口数据
function reqTableDataFunc(params: any) {
  return $scoreList(params)
}

function searchFunc() {
  infoTableRef.value.refTable(true)
}
/**
 * 新增OR修改
 * @param record 当前记录
 * @param disabled 是否限制修改内容
 * @param minScoreNum 最小数量
 */
function addOrEditFunc(record,disabled = false,isDisabled,isDetail,minScoreNum = 1){
  addOrEditRef.value.show(record,disabled,isDisabled,isDetail,minScoreNum)
}
// 修改奖品状态
function stateChange(record){
  if(record.state == 1){
    $infoBox.confirmDanger('确认开启？', '请确认是否开启当前奖品状态？', () => {
      $scoreState({ scoreId: record.scoreId, state: 2 }).then(res => {
        $infoBox.message.success('开启成功')
        infoTableRef.value.refTable()
      })
    })
  }else{
    $infoBox.confirmDanger('确认关闭？', '请确认是否关闭当前奖品状态？', () => {
      $scoreState( { scoreId: record.scoreId, state: 1 }).then(res => {
        $infoBox.message.success('关闭成功')
        infoTableRef.value.refTable()
      })
    })
  }
}

// 详情
function detailFunc(record){
  detailRef.value.show(record)
}

// 删除
function virtualDelete(record){
  $infoBox.confirmDanger('确认删除？', '请确认是否删除当前奖品？', () => {
    if(record.state == 2){
      $infoBox.message.warn('该奖品已配置活动，无法删除！')
      return
    }
    $scoreDelete(record.scoreId).then(res => {
      $infoBox.message.success('删除成功！')
      infoTableRef.value.refTable()
    })
  })
}

</script>
